@charset "UTF-8";

html,body {
	min-width: 1200px;
}

/* section1 */
.section1 {
	width: 100%;
	height: 590px;
	background: url("section1.jpg") no-repeat center;
	background-size: cover;
}
.section1 .wrap {
	padding-top: 90px;
}
.section1 .userMsg {
	margin-top: 45px;
	margin-right: 115px;
	vertical-align: top;
}
.section1 .userMsg .avatar {
	width: 200px;
	height: 200px;
}
.section1 .userMsg .details {
	margin-top: 20px;
	font-size: 24px;
	color: #fff;
}
.section1 .userMsg .details p {
	line-height: 1.5;
}
.section1 .courseMsg .title {
	width: 307px;
	height: 37px;
	margin:0 auto;
	background: url("title1.png") no-repeat center;
}
.section1 .courseMsg .subheading {
	margin-top: 15px;
}
.section1 .courseMsg .subheading .text {
	font-size: 18px;
	color: #fff;
	margin:0 10px;
}
.section1 .courseMsg .subheading .line {
	width: 20px;
	height: 1px;
	background: #fff;
	vertical-align: top;
	margin-top: 9px;
}
.section1 .courseMsg .details {
	margin:35px 0;
	color: #fff;
}
.section1 .courseMsg .details .text {
	font-size: 24px;
	line-height: 1.5;
}
.section1 .courseMsg .details .text span {
	color: #3360f5;
}
.section1 .courseMsg .buyMsg .price {
	font-size: 22px;
	color: #fff;
	margin-bottom: 45px;
}
.section1 .courseMsg .buyMsg .price span {
	font-size: 32px;
	color: #3360f5;
}
.section1 .courseMsg .buyMsg a {
	width: 120px;
	height: 40px;
	padding:10px 0;
	font-size: 20px;
	color:#fff;
	margin-left: 110px;
	-webkit-border-radius: 10px;
	border-radius: 10px;
	background: #286fff;
}
.section1 .courseMsg .buyMsg a:first-child {
	margin-left: 0;
}
.section1 .courseMsg .buyMsg a .txt {
	font-size: 14px;
	margin-top: 6px;
}
.section1 .courseMsg .buyMsg a:hover {
	background: #0e57ea;
	-webkit-transform: translateY(-2px);
    transform: translateY(-2px);
    z-index: 1;
}
.section1 .codePic {
	vertical-align: top;
	margin: 120px 0 0 80px;
}

/* section2 */
.section2 {
	width: 100%;
	height: 863px;
	background: url("section2.jpg") no-repeat center;
	background-size: cover;
}
.section2 .wrap {
	padding-top: 50px;
}
.section2 .title-image {
	width:708px;
	height: 48px;
	margin:0 auto;
	background: url("title2.png") no-repeat center;
}
.section2 .bg-image {
	width: 948px;
	height: 615px;
	margin:50px auto 0;
	-webkit-box-shadow: 0 0 20px rgba(0,0,0,.3);
	box-shadow: 0 0 20px rgba(0,0,0,.3);
	background: url("1.png") no-repeat center;
}
.section2 .bg-image:hover {
	-webkit-transform: translateY(-5px);
    transform: translateY(-5px);
    z-index: 1;
}

/* section3 */
.section3 {
	width: 100%;
	height: 1044px;
	background: url("section3.jpg") no-repeat center;
	background-size: cover;
}
.section3 .wrap {
	padding-top: 90px;
}
.section3 .title-image {
	width: 631px;
	height: 84px;
	margin:0 auto;
	background: url("title3.png") no-repeat center;
	background-size: cover;
}
.section3 .bg-image {
	width: 705px;
	height: 750px;
	margin:80px auto 0;
	background: url("3.png") no-repeat center;
}

/* section4 */
.section4 {
	width: 100%;
	height: 1000px;
	background: url("section4.jpg") no-repeat center;
	background-size: cover;
}
.section4 .wrap {
	padding-top: 45px;
}
.section4 .textBox {
	color: #fff;
	margin-bottom: 30px;
}
.section4 .textBox .text {
	font-size: 28px;
}
.section4 .textBox .bg-pic {
	width: 140px;
	height: 123px;
	margin:20px auto;
	background: url("4.png") no-repeat center;
}
.section4 .textBox .textBtn {
	width:240px;
	height: 40px;
	margin:0 auto 60px;
	line-height: 40px;
	font-size: 18px;
	color: #fff;
	border:2px solid #fff;
	background: #286fff;
}
.section4 .textBox .textBtn:hover {
	-webkit-transform: translateY(-2px);
    transform: translateY(-2px);
    z-index: 1;
}
.section4 .videoBox {
	width: 948px;
	height: 535px;
	margin:0 auto;
	-webkit-border-radius: 10px;
	border-radius: 10px;
	overflow: hidden;
}

/* section5 */
.section5 {
	width: 100%;
	height: 621px;
	background: url("section5.jpg") no-repeat center;
	background-size: cover;
}
.section5 .wrap {
	padding-top: 100px;
}
.section5 .main {
	width: 950px;
	height: 442px;
	margin:0 auto;
	background: #191e2e;
}
.section5 .main .workerPic {
	width: 255px;
	height: 442px;
	background: url("5.png") no-repeat center;
}
.section5 .main .aboutTeacher {
	width: 695px;
	height: 442px;
}
.section5 .main .aboutTeacher .title {
	font-size: 30px;
	color:#fff;
	margin:40px auto 30px;
}
.section5 .main .aboutTeacher .text {
	font-size: 20px;
	color: #fff;
	padding:0 120px;
	line-height: 1.6;
	text-align: left;
}
.section5 .main .aboutTeacher .checkMore {
	width:185px;
	height: 35px;
	line-height: 35px;
	font-size: 20px;
	color: #fff;
	margin:35px auto 0;
	border:1px solid #fff;
	-webkit-border-radius: 10px;
	border-radius: 10px;
}
.section5 .main .aboutTeacher .checkMore:hover {
	background: rgba(255,255,255,.1);
	-webkit-transform: translateY(-2px);
    transform: translateY(-2px);
    z-index: 1;
}

/* section6 */
.section6 {
	width: 100%;
	height: 1384px;
	background: url("section6.jpg") no-repeat center;
	background-size: cover;
}

/* section7 */
.section7 {
	width: 100%;
}
.section7 .page1 .titleBox {
	padding-top: 200px;
}
.section7 .page3 .titleBox {
	padding-top: 35px;
}
.section7 .titleBox .text {
	font-size: 30px;
	color: #fff;
	line-height: 1.5;
	margin:0 auto 70px;
}
.section7 .page3 .titleBox .text{
	margin-bottom: 35px;
}
.section7 .titleBox .text span {
	font-size: 34px;
	font-weight: 700;
	margin:0 6px;
}
.section7 .mainBox .page1 {
	width: 100%;
	height: 1421px;
	background: url("section7-1.jpg") no-repeat center;
	background-size: cover;
}
.section7 .mainBox .page2 {
	width: 100%;
	height: 790px;
	background: url("section7-2.jpg") no-repeat center;
	background-size: cover;
}
.section7 .mainBox .page3 {
	width: 100%;
	height: 1223px;
	background: url("section7-3.jpg") no-repeat center;
	background-size: cover;
}
.section7 .mainBox .works {
	margin-bottom: 35px;
}
.section7 .mainBox .page3 .works {
	padding-top: 35px;
}
.section7 .mainBox .works .name {
	vertical-align: top;
} 
.section7 .mainBox .doctorStrange .name {
	margin:85px 0 0 20px;
}
.section7 .mainBox .lifeOfPi .name {
	margin:142px 55px 0 0;
}
.section7 .mainBox .blackPanther .name {
	margin:129px 0 0 55px;
}
.section7 .mainBox .beasts .name {
	margin:130px 55px 0 0;
}
.section7 .mainBox .elysium .name {
	margin:140px 0 0 55px;
}
.section7 .mainBox .xMen .name {
	margin:130px 55px 0 0;
}
.section7 .mainBox .works .workPic {
	-webkit-box-shadow: 0 0 30px rgba(0,0,0,.3);
	box-shadow: 0 0 30px rgba(0,0,0,.3);
}
.section7 .mainBox .works .workPic:hover {
	-webkit-transform: translateY(-5px);
    transform: translateY(-5px);
    z-index: 1;
}
.section7 .mainBox .page3 .bg-image {
	width: 1053px;
	height: 593px;
	margin:0 auto;
	background: url("2.png") no-repeat center;
	background-size: cover;
	-webkit-box-shadow: 0 0 30px rgba(0,0,0,.3);
    box-shadow: 0 0 30px rgba(0,0,0,.3);
}
.section7 .mainBox .page3 .bg-image:hover {
	-webkit-transform: translateY(-5px);
    transform: translateY(-5px);
    z-index: 1;
}

/* section8 */
.section8 {
	width: 100%;
	height: 1501px;
	background: url("section8.jpg") no-repeat center;
	background-size: cover;
}
.section8 .wrap {
	padding-top: 140px;
}
.section8 .title {
	font-size: 36px;
	color:#fff;
	margin-bottom: 80px;
}
.section8 .courseList .item {
	width: 327px;
	padding:0 36px;
	border-bottom: 1px solid #35393d;
	border-right: 1px solid #35393d;
}
.section8 .courseList .item:nth-child(3n) {
	border-right: 0;
}
.section8 .courseList .item:nth-child(4),
.section8 .courseList .item:nth-child(5),
.section8 .courseList .item:nth-child(6) {
	border-bottom: 0;
}
.section8 .courseList .item .courseName {
	font-size: 24px;
	height: 66px;
	color: #fff;
	line-height: 1.4;
	margin-top: 25px;
	margin-bottom: 10px;
}
.section8 .courseList .item:nth-child(4) .courseName,
.section8 .courseList .item:nth-child(5) .courseName,
.section8 .courseList .item:nth-child(6) .courseName {
	margin-top: 50px;
}
.section8 .courseList .item .coursePic {
	width: 320px;
	height: 147px;
}
.section8 .courseList .item .details {
	font-size: 16px;
	color: #fff;
	height:118px;
	line-height: 1.5;
	margin:15px auto 40px;
	display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 5;
    overflow: hidden;
}
.section8 .courseList .item .time {
	font-size: 16px;
	color: #fff;
	line-height: 1.5;
	margin-bottom: 20px;
}
.section8 .courseList .item .buy {
	width: 230px;
	height: 50px;
	line-height: 50px;
	font-size: 16px;
	color: #fff;
	margin:0 auto 50px;
	-webkit-border-radius: 10px;
	border-radius: 10px;
	background:#2d56dd;
}
.section8 .courseList .item .buy .price {
	margin-right: 12px;
}
.section8 .courseList .item .buy:hover {
	background: #043db1;
    -webkit-transform: translateY(-2px);
    transform: translateY(-2px);
    z-index: 1;
}
.section8 .courseList .item .checkMore {
	width: 180px;
	height: 46px;
	line-height: 46px;
	font-size: 18px;
	color: #fff;
	margin:220px auto 0;
	border:2px solid #fff;
	border-radius: 10px;
}
.section8 .courseList .item .checkMore:hover {
	background: rgba(255,255,255,.1);
    -webkit-transform: translateY(-2px);
    transform: translateY(-2px);
    z-index: 1;
}

/* section9 */
.section9 .title {
	font-size: 24px;
	color: #666;
	margin:50px 0 30px;
}
.section9 .main {
	width: 100%;
	height: 500px;
	background: url("section9.jpg") no-repeat center;
	background-size: cover;
}
.section9 .main a {
	width: 172px;
	height: 42px;
	margin-top: 400px;
	background-position: center;
	background-repeat: no-repeat;
	background-size: 100%;
}
.section9 .main a:hover {
	-webkit-transform: translateY(-2px);
    transform: translateY(-2px);
    z-index: 1;
}
.section9 .main .join {
	margin-right: 50px;
	background-image: url("join.png");
}
.section9 .main .recommend {
	background-image: url("propaganda.png");
}